<template>
  <div>
    <ymm-content title="我的体检">
      <template slot="toolbar">
        <ymm-toolbar @add="show=true" :show-search="false"/>
      </template>
      <template>
        <exam-table :exams="exams" @showInfo="showInfo"/>
        <div class="exam-chart">
          <!--TODO:体重身高变化折线图-->
          <!--<height-chart/>-->
          <!--<weight-chart/>-->
        </div>
      </template>
    </ymm-content>
    <exam-add-dialog :show="show" @closeDialog="show=false" @add="onAddExam"/>
  </div>
</template>

<script>
import YmmContent from "@/components/common/ymm-content";
import YmmToolbar from "@/components/common/ymm-toolbar";
import ExamTable from "@/views/student/exam/exam-admin-table";
import ExamAddDialog from "@/views/student/exam/exam-add-dialog";
import HeightChart from "@/views/student/exam/height-chart";
import WeightChart from "@/views/student/exam/weight-chart";
import {addExam, getExamList} from "@/api/student-exam";

export default {
  data() {
    return {
      exams: [],
      show: false
    }
  },
  methods: {
    /*index事件*/
    getExams() {
      getExamList().then(res => {
        this.exams = res
      }).catch(err => {
        this.$message.error('获取体检列表失败')
      })
    },
    /*dialog事件*/
    onAddExam(exam) {
      addExam(exam).then(res => {
        this.$message.success('添加成功')
        this.getExams()
        this.show = false
      }).catch(err => {
        this.$message.error('添加失败')
      })
    },
    /*Table事件*/
    showInfo(exam) {
      this.$store.commit('student/CHANGE_EXAM', exam)
      this.$router.push({name: 'ExamDetail'})
    }
  },
  components: {YmmContent, YmmToolbar, ExamTable, ExamAddDialog, HeightChart, WeightChart},
  created() {
    this.getExams()
  }
}
</script>

<style scoped lang="less">
.exam-chart {
  margin-top: 20px;
  display: flex;
}
</style>
